<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>创建日程</span>
            </div>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
              <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" placeholder="请输入日程标题"></el-input>
              </el-form-item>
              <el-form-item label="日期" prop="date">
                <el-date-picker
                  v-model="form.date"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="时间" prop="time">
                <el-time-picker
                  v-model="form.time"
                  format="HH:mm"
                  placeholder="选择时间">
                </el-time-picker>
              </el-form-item>
              <el-form-item label="地点">
                <el-input v-model="form.location" placeholder="请输入地点"></el-input>
              </el-form-item>
              <el-form-item label="描述">
                <el-input type="textarea" :rows="3" v-model="form.description" placeholder="请输入描述"></el-input>
              </el-form-item>
              <el-form-item label="重复">
                <el-select v-model="form.repeat" placeholder="请选择">
                  <el-option label="不重复" value="none"></el-option>
                  <el-option label="每天" value="daily"></el-option>
                  <el-option label="每周" value="weekly"></el-option>
                  <el-option label="每月" value="monthly"></el-option>
                  <el-option label="每年" value="yearly"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="提醒">
                <el-select v-model="form.reminder" placeholder="请选择">
                  <el-option label="不提醒" value="none"></el-option>
                  <el-option label="5分钟前" value="5min"></el-option>
                  <el-option label="15分钟前" value="15min"></el-option>
                  <el-option label="30分钟前" value="30min"></el-option>
                  <el-option label="1小时前" value="1hour"></el-option>
                  <el-option label="1天前" value="1day"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">创建</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col :span="18">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>日程日历</span>
              <el-radio-group v-model="calendarView" style="float: right;" size="small">
                <el-radio-button label="month">月</el-radio-button>
                <el-radio-button label="week">周</el-radio-button>
                <el-radio-button label="day">日</el-radio-button>
              </el-radio-group>
            </div>
            <div class="calendar-container">
              <!-- 这里应该集成日历组件，如FullCalendar -->
              <div class="calendar-placeholder">
                <p>日历组件将在这里显示</p>
                <p>当前视图: {{ calendarView }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>即将到来的日程</span>
            </div>
            <el-table
              :data="upcomingSchedules"
              style="width: 100%">
              <el-table-column
                prop="title"
                label="标题"
                width="180">
              </el-table-column>
              <el-table-column
                prop="dateTime"
                label="日期时间"
                width="180">
              </el-table-column>
              <el-table-column
                prop="location"
                label="地点">
              </el-table-column>
              <el-table-column
                prop="description"
                label="描述">
              </el-table-column>
              <el-table-column
                label="操作"
                width="150">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Schedule',
    data() {
      return {
        form: {
          title: '',
          date: '',
          time: '',
          location: '',
          description: '',
          repeat: 'none',
          reminder: 'none'
        },
        rules: {
          title: [
            { required: true, message: '请输入日程标题', trigger: 'blur' }
          ],
          date: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          time: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ]
        },
        calendarView: 'month',
        upcomingSchedules: [
          {
            id: 1,
            title: '产品评审会议',
            dateTime: '2023-01-15 10:00',
            location: '会议室A',
            description: '讨论新产品功能'
          },
          {
            id: 2,
            title: '客户拜访',
            dateTime: '2023-01-16 14:30',
            location: '客户公司',
            description: '介绍新产品'
          },
          {
            id: 3,
            title: '团队建设活动',
            dateTime: '2023-01-20 15:00',
            location: '公园',
            description: '团队户外拓展'
          }
        ]
      }
    },
    methods: {
      onSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$message({
              message: '创建成功',
              type: 'success'
            })
            // 实际项目中应该调用API
            // createSchedule(this.form).then(() => {
            //   this.$message({
            //     message: '创建成功',
            //     type: 'success'
            //   })
            //   this.resetForm()
            //   this.getUpcomingSchedules()
            // })
          } else {
            return false
          }
        })
      },
      resetForm() {
        this.$refs.form.resetFields()
      },
      handleEdit(row) {
        console.log('编辑日程', row)
        // 实际项目中应该打开编辑对话框或跳转到编辑页面
      },
      handleDelete(row) {
        this.$confirm('确认删除该日程?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 模拟删除操作
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 更新列表
          const index = this.upcomingSchedules.findIndex(item => item.id === row.id)
          if (index !== -1) {
            this.upcomingSchedules.splice(index, 1)
          }
          
          // 实际项目中应该调用API
          // deleteSchedule(row.id).then(() => {
          //   this.$message({
          //     type: 'success',
          //     message: '删除成功!'
          //   })
          //   this.getUpcomingSchedules()
          // })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    }
  }
  </script>
  
  <style scoped>
  .calendar-container {
    min-height: 600px;
  }
  .calendar-placeholder {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 600px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  </style>